<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title> Justinmind - Install extension</title>
    <style type="text/css">
      body { background-color: #ffffff; font-family: 'OpenSans', sans-serif; color: black;}
      #overlay { position: relative; top: 40px; width: 100%; }
      div.button:hover {opacity:0.9;}
      a {font-size: 12pt;line-height:35px;display:inline-block;text-decoration:none; color:white; width:100%;height:100%; vertical-align:middle;}
      #main {
        width: 900px;
        margin: 0 auto;
      }
      .content_section {
        margin-top: 20px;
		margin-bottom: 38px;
        border-top: 1px solid #bfbfbf;
		padding-left:20px;
		padding-top:33px;
      }
	  .content_section_alt {
        margin-top: 0px;
		margin-bottom: 28px;
        border-top: 1px solid #bfbfbf;
		padding-left:20px;
		padding-top:33px;
      }
	  .first{
		border-top: 1px solid black;
	  }
	  #logo {
		padding-left:20px;
      }
      #title, #alt_title { 
	      font-size: 22pt; 
	      margin-bottom: 10px; 
	      margin-top:0px;
	      font-family: 'OpenSansLight', sans-serif;
      }
	  #alt_title{
		padding-left:20px;
		padding-top:50px;
	  }
      #intro { 
		  margin-bottom:45px;
	  }
	  .description{
	    font-size: 10pt; 
		line-height: 15px; 
	  }
	  #step { 
		  font-size: 10pt; 
		  line-height: 15px; 
	  }
	  .bullet {
	    color:white;
	    text-align:center;
		background-color: #21C0C0;
		width: 18px; height: 18px; 
		-webkit-border-radius: 50%; -moz-border-radius:50%;
		border-radius:50%;
		margin: 0px, auto;
		margin-right: 5px;
		display:inline-block;
		padding-right:1px;
		padding-top:1px;
	  }
	  #install_button{
		/*background-image: url('./images/install_button.png');*/
	  }
	  #view_button{
		/*background-image: url('./images/view.png');*/
	  }
	  .button{
	  	width:236px;
		height:36px;
		margin-left:30px;
		margin-top:25px;
		color:white;
		background-color:#21C0C0;
		text-align:center;
		vertical-align:middle;
	  }
	  #list_steps, #settings{
		margin-left:30px;
	  }
	  #list_alt{
		padding-top:0px;
		margin-top:0px;
		margin-bottom:40px;
	  }
	  div.alt{
		margin-bottom:10px;
	  }
	  #settings{
		margin-top:28px;
	  }
	  .letter{
		display:inline-block;
		color:#21C0C0;
		font-weight:bold;
	  }
	  @font-face{
		font-family: 'OpenSans';
		src:url('./resources/OpenSans-Regular.ttf') format('truetype');
	  }
	  @font-face{
		font-family: 'OpenSansBold';
		src:url('./resources/OpenSans-Bold.ttf') format('truetype');
	  }
	  @font-face{
		font-family: 'OpenSansLight';
		src:url('./resources/OpenSans-Light.ttf') format('truetype');
	  }
	  .intro_alt{
		font-weight:bold;
		margin-bottom:6px;
	  }
	  .sign{
		float:right;
		font-size:10pt;
		color:#21C0C0;
	  }
	  .openSansBold{
		font-family: 'OpenSansBold', sans-serif;
		display:inline-block;
	  }
    </style>
  </head>
  <body>
    <div id="overlay">
      <div id="main">
        <img id="logo" src='./images/logo.png'>
        <div class="content_section first">
	        <div id="title">Install <div class="openSansBold">Justinmind</div>'s Chrome Extension</div>
	        <div id="intro" class="description">
	          Due to security restrictions Google Chrome limits the access to local files.<br>
			  Follow these instructions to allow access to view Justinmind's prototypes in Google Chrome:
			</div>
	        <div id="step">
				<div class="bullet"><b>1</b></div>
				<b>Download and install Justinmind Extension</b>
		        <div id='install_button' class="button"><a href="https://chrome.google.com/webstore/detail/pnfffbfcdapknabgmlnpagljkjdejaap" target='_blank'>Install Extension</a></div>   
	        </div> 
		</div>
		<div class="content_section">
	        <div id="step">
				<div class="bullet"><b>2</b></div>
				<b>Open Chrome extension's page</b>
	        </div> 
	        <dl id="list_steps" class="description">
		        <dt><div class="letter">A.</div> Click the Chrome menu on the browser toolbar.</dt>
		        <dt><div class="letter">B.</div> Select Tools.</dt>
		        <dt><div class="letter">C.</div> Select Extensions.</dt>
	        </dl>
			<img id="settings" src='./images/settings.png'>
		</div>
		<div class="content_section">
			<div id="step">
				<div class="bullet"><b>3</b></div>
				<b>Check 'Allow access to file URLs'</b>
			</div>
			<img id="settings" src='./images/extension.png'>
	    </div>
		<div class="content_section">
			<div id="step">
				<div class="bullet"><b>4</b></div>
				<b>View your prototype</b>
			</div>
			<div id='view_button' class="button"><a href="../../../index.html">View</a></div>  
	    </div>
		<!--EXTENSIONS-->
		<div id="alt_title"><div class="openSansBold">Alternatives</div> to Chrome Extension</div>
		<div class="content_section_alt first">
			<div class="alt description"><div class='intro_alt'>Set Chrome as 'Default Browser' in Justinmind Prototyper</div>
				<div>Close Google Chrome. Open Justinmind Prototyper and go to 'Preferences' page.<br>Click on 'browse' in 'Default Browser' and select the executable Chrome file from your file system.</div>
			</div>
		</div>
		<div class="content_section_alt">
		    <div class="alt description"><div class='intro_alt'>View your prototype in Usernote</div>
				<div>Select 'Publish Online' in Justinmind Prototyper.</div>
			</div>
		</div>
		<div class="content_section_alt">
		    <div class="alt description"><div class='intro_alt'>Install Justinmind Extension offline</div>
				<div>Install Justinmind Extension for Chrome without internet connection:</div>
				<dl id="list_steps" class="description">
					<dt><b>A.</b> Open Chrome's extensions page (Step 2).</dt>
					<dt><b>B.</b> Drag the Chrome Extension File '/resources/extensions/justinmind_extension.crx' to the Chrome window.</dt>
					<dt><b>C.</b> Select 'Add' to confirm installation.</dt>
					<dt><b>D.</b> Perform Step 3.</dt>
				</dl>
			</div>
		</div>
		<div class="content_section_alt">
			<div class="alt description"><div class='intro_alt'>Configure Chrome permissions</div>
				<div>Close Google Chrome. Run Google Chrome with the flag '--allow-file-access-from-files'.</div>
			</div>
		</div>
		<div class="content_section_alt first"><div class="sign">© Justinmind 2013</div></div>
		</div>
	  </div>
    </div>
  </body>
</html>